<template>
  <div class="reset"
    v-loading="loading">
    <section class="reset-wrapper">
      <section class="retrieve">
        <div class="title">重置密码</div>
        <el-steps style="width: 120%;" :active="active" finish-status="success" space="100%">
          <el-step title="输入账号"></el-step>
          <el-step title="输入验证码"></el-step>
          <el-step title="输入新密码"></el-step>
        </el-steps>
        <section class="info-wrapper">
          <section v-show="active === 0">
            <el-form  :model="ruleForm1"
                      :rules="rules1"
                      ref="ruleForm1"
                      :show-message="false"
                      class="demo-ruleForm">
              <el-form-item prop="number">
                <el-input
                  placeholder="请输入手机号"
                  @keydown.enter.native.prevent='handleBtnClick'
                  v-model.trim="ruleForm1.number"
                  oninput="this.value=this.value.replace(/\D/g,'')"
                  maxlength="11">
                </el-input>
              </el-form-item>
            </el-form>
          </section>
          <section v-show="active === 1">
            <el-form  :model="ruleForm2"
                      :rules="rules2"
                      ref="ruleForm2"
                      :show-message="false"
                      class="demo-ruleForm">
              <el-form-item prop="vCode">
                <el-input
                  placeholder="请输入验证码"
                  @keydown.enter.native.prevent='handleBtnClick'
                  v-model.trim="ruleForm2.vCode">
                </el-input>
              </el-form-item>
            </el-form>
            <div class="send-btn">
              <el-button :disabled="vCodeMsg !== '发送验证码' && vCodeMsg !== '重新获取'" type="primary" @click="sendVcode">{{vCodeMsg}}</el-button>
            </div>
          </section>
          <section v-show="active === 2">
            <el-form  :model="ruleForm3"
                      :rules="rules3"
                      ref="ruleForm3"
                      class="demo-ruleForm">
              <el-form-item prop="newPass">
                <el-input
                  placeholder="请输入新密码"
                  v-model.trim="ruleForm3.newPass"
                  @keydown.enter.native.prevent='handleBtnClick'
                  show-password>
                </el-input>
              </el-form-item>
              <el-form-item prop="newPass_">
                <el-input
                  placeholder="请重复新密码"
                  @keydown.enter.native.prevent='handleBtnClick'
                  v-model.trim="ruleForm3.newPass_"
                  show-password>
                </el-input>
              </el-form-item>
            </el-form>
          </section>
        </section>
        <section class="btn">
          <el-button type="primary" :loading="isClick" @click="handleBtnClick">{{btnText}}</el-button>
          <div class="last" v-show="active === 1" @click="handleLastClick">上一步</div>
        </section>
      </section>
    </section>
  </div>
</template>

<script>
import { checkForm } from 'assets/js/mixin'
export default {
  mixins: [checkForm],
  data () {
    let reg = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{8,20}$/
    var validatePass1 = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入密码'))
      } else if (!reg.test(value)) {
        callback(new Error('密码必须是8-20位字母、数字或字符，至少包含两种！'))
      } else {
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请再次输入密码'))
      } else if (!reg.test(value)) {
        callback(new Error('密码必须是8-20位字母、数字或字符，至少包含两种！'))
      } else if (value !== this.ruleForm3.newPass) {
        callback(new Error('新密码与确认密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      loading: '',
      umidToken: '',
      vCodeMsg: '发送验证码',
      count: 0,
      active: 0,
      isClick: false,
      ruleForm1: {
        number: null
      },
      rules1: {
        number: [
          { required: true, trigger: 'blur' }
        ]
      },
      ruleForm2: {
        vCode: null
      },
      rules2: {
        vCode: [
          { required: true, trigger: 'blur' }
        ]
      },
      ruleForm3: {
        newPass: null,
        newPass_: null
      },
      rules3: {
        newPass: [
          { validator: validatePass1, trigger: 'blur' }
        ],
        newPass_: [
          { validator: validatePass2, trigger: 'blur' }
        ]
      },
      timer: null
    }
  },
  computed: {
    btnText () {
      return this.active === 0 ? '下一步' : this.active === 1 ? '验证' : '完成'
    }
  },
  methods: {
    // 点击下一步
    handleBtnClick () {
      if (!this.ruleForm1.number) {
        this.$message({
          message: '请输入手机/工号/邮箱',
          type: 'warning'
        })
        return
      }
      if (!this.checkTel(this.ruleForm1.number)) {
        this.showMsg('请先输入正确的手机号！')
        return
      }
      if (this.active === 0 && this.ruleForm1.number) {
        this.sendVcode()
      }
      if (this.active === 1 && !this.ruleForm2.vCode) {
        this.$message({
          message: '请输入验证码',
          type: 'warning'
        })
        return
      }
      if (this.btnText === '验证') {
        if (this.loading) {
          return
        }
        this.loading = true
        let url = `/account/security/sms/reset/valid`
        let param = {
          phone: this.ruleForm1.number,
          captcha: this.ruleForm2.vCode
        }
        this.post(url, param).then(rsp => {
          if (rsp.data.code === 200) {
            this.showSucc(rsp.data.message)
            this.umidToken = rsp.data.data.umidToken
            this.active++
          }
          this.loading = false
        }).catch(e => {
          this.loading = false
          this.handleError(e)
        })
      } else if (this.btnText === '完成') {
        this.$refs.ruleForm3.validate((valid) => {
          if (valid) {
            if (this.loading) {
              return
            }
            this.loading = true
            let url = `/account/security/reset/pwd`
            let param = {
              phone: this.ruleForm1.number,
              umidToken: this.umidToken,
              newPassword: this.ruleForm3.newPass,
              refPassword: this.ruleForm3.newPass_
            }
            this.post(url, param).then(rsp => {
              if (rsp.data.code === 200) {
                this.showSucc(rsp.data.message)
                this.replaceRoute({name: 'Login'})
              }
              this.loading = false
            }).catch(e => {
              this.handleError(e)
              if (e.data.code === 4000) {
                this.active = 0
                this.ruleForm3.newPass_ = ''
                this.ruleForm3.newPass = ''
              }
              this.loading = false
            })
          }
        })
      }
    },
    // 点击上一步
    handleLastClick () {
      this.active--
    },
    // 发送验证码60s倒计时
    cutDown () {
      // if (this.count === 0) {
      //   this.vCodeMsg = '重新获取'
      //   this.count = 60
      //   return
      // }
      // this.count--
      // this.vCodeMsg = this.count + 's ' + '重新发送'
      // setTimeout(() => {
      //   this.cutDown()
      // }, 1000)
      clearInterval(this.timer)
      this.count = 60
      this.timer = setInterval(() => {
        this.count--
        this.vCodeMsg = this.count + 's ' + '重新发送'
        if (this.count === 0) {
          this.vCodeMsg = '重新获取'
          clearInterval(this.timer)
        }
      }, 1000)
    },
    // 发送验证码点击事件
    sendVcode () {
      if (this.count) {
        return
      }
      let url = `/account/security/sms/reset`
      let params = {
        phone: this.ruleForm1.number
      }
      this.loading = true
      this.post(url, params).then(rsp => {
        if (rsp.data.errno === '503' || rsp.data.errno === '399') {
          this.$notify({
            title: '警告',
            message: rsp.data.message,
            type: 'warning'
          })
        } else if (rsp.data.code === 200) {
          this.active = 1
          this.cutDown()
          this.showSucc(rsp.data.message)
          // setTimeout(() => {
          //   this.showSucc(rsp.data.message)
          // }, 400)
        }
        this.loading = false
      }).catch(e => {
        this.handleError(e)
        this.loading = false
      })
    }
  },
  created () {

  },
  beforeDestroy () {
    clearInterval(this.timer)
  }
}
</script>

<style lang="stylus" scoped>
  .reset >>> .el-input__inner
    height 54px
  .reset >>> .el-button--primary
    padding 0
    height 48px
    width 100%
  .send-btn >>> .el-button--primary
    width 120px
    height 40px
    line-height 0
  .reset
    display flex
    flex-direction column
    scroll()
    .reset-wrapper
      center()
      flex 1
      background-color #F7F7F7
      .retrieve
        padded_box(border-box, 31px 183px 87px)
        columnBetween()
        width 922px
        height 550px
        border-radius 6px
        background-color #fff
        .title
          line-height 39px
          text-align center
          font-size 24px
          color #333333
        .info-wrapper
          padded_box(border-box, 0 98px)
          columnBetween()
          width 100%
          height 170px
          >>> .el-form-item
            margin-bottom 26px
        .btn
          padded_box(border-box, 0 98px)
          columnBetween()
          width 100%
          height 90px
          .last
            margin 0 auto
            width 48px
            color #3496FF
            font-size 16px
            cursor pointer
</style>
